<!-- subpkg_consult/room/components/message-info.vue -->
<script lang="ts" setup>
	import { MsgItem } from '@/types/room.d.ts'
	import { useUserStore } from '@/stores/user'
	import dayjs from 'dayjs'
	const props = defineProps<{ type: number; msgItem: MsgItem }>()

	const formatTime = (time: string) => {
		return dayjs(time).format('HH:MM:ss')
	}

	const store = useUserStore()
</script>

<template>
	<!-- 文字/图片消息 -->
	<!-- 自己的信息 添加 reverse 这个类即可 -->
	<view class="message-item" :class="{ reverse: store.userId === msgItem.from }">
		<image class="room-avatar" :src="msgItem.fromAvatar" />
		<view class="room-message">
			<view class="time">{{ formatTime(msgItem.createTime) }}</view>
			<view v-if="type === 1" class="text">
				{{ msgItem.msg.content }}
			</view>
			<image v-if="type === 4" class="image" :src="msgItem.msg.picture.url" mode="widthFix" />
		</view>
	</view>
</template>

<style lang="scss">
	.message-item {
		display: flex;
		align-self: flex-start;
		margin-top: 60rpx;

		.room-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}

		.room-message {
			margin-left: 20rpx;
		}

		.time {
			font-size: 26rpx;
			color: #979797;
		}

		.image {
			max-width: 420rpx;
			margin-top: 10rpx;
		}

		.text {
			max-width: 420rpx;
			line-height: 1.75;
			padding: 30rpx 40rpx;
			margin-top: 16rpx;
			border-radius: 20rpx;
			font-size: 30rpx;
			color: #3c3e42;
			background-color: #fff;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: -25rpx;
				width: 26rpx;
				height: 52rpx;
				background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-1.png);
				background-size: contain;
			}
		}

		&.reverse {
			flex-direction: row-reverse;
			align-self: flex-end;

			.room-message {
				margin-left: 0;
				margin-right: 20rpx;
			}

			.time {
				text-align: right;
			}

			.text {
				background-color: #16c2a3;
				color: #fff;

				&::after {
					left: auto;
					right: -25rpx;
					background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-2.png);
				}
			}
		}
	}
</style>
